<template>
  <view>
    <navbar :showLeft="false" title="AI模拟面试"></navbar>
    <view class="header" :style="{paddingTop: appInfoStore.getInfo().navBarHeight + 2*appInfoStore.getInfo().statusBar + 'px'}"></view>

    <view class="home-page">
      <!-- 顶部导航栏 -->
      <!-- 头部提示区域 -->
      <view class="header-section">
        <text class="prompt-text">AI面试官已上线,请开始你的表演！</text>
        <button
          type="primary"
          size="default"
          class="view-all-btn"
          @click="navigateToCategory"
        >
          查看所有面试分类
        </button>
      </view>

      <!-- 热门面试分类 -->
      <view class="category-section">
        <text class="section-title">热门面试分类</text>
        <view class="category-list">
           <view class="history-empty" v-if="!categoryList.length">
           暂无热门分类信息
        </view>
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="category-item"
            @click="onCategoryClick(item)"
          >
            <view class="category-icon" :style="{backgroundColor: item.color1}"></view>
            <view class="category-content">
              <text class="category-title">{{item.categoryName}}</text>
              <text class="category-questions">5个问题</text>
            </view>
            <!-- <uni-icons type="right" size="16" color="#999"></uni-icons> -->
          </view>
        </view>
      </view>

      <!-- 最近面试 -->
    <view class="history-section">
        <text class="section-title">最近面试</text>
          <view class="history-empty" v-if="!latestInterviewInfo.length">
              暂无面试记录，开始你的第一次面试吧！
          </view>
        <view class="history-tags" v-else>
        <view
            v-for="(item, index) in latestInterviewInfo"
            :key="index"
            class="history-tag"
            :class="getTagClass(index)"
            @click="handleTagClick(item)"
          >
        {{ item.title || '未命名面试' }}
      </view>
    </view>
  </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
import { onShow } from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance();
const appInfoStore = useAppInfoStore();
import { useAppInfoStore } from "@/stores/appInfo";

// 响应式数据
const activeName = ref('home');
const categoryList = ref([
  { title: '技术面试', questions: '', color: '#e3f2fd' },
  { title: '行为面试', questions: '5个问题', color: '#e8f5e9' },
  { title: '产品面试', questions: '5个问题', color: '#fff3e0' },
  { title: '管理面试', questions: '5个问题', color: '#fce4ec' }
]);

// 加载热门分类
const loadHotCategory=async()=>{
    const result = await proxy.Request({
        url: proxy.Api.loadHotCategory,
        method: 'POST',
        showLoading: false
      });
      if(!result){
        return;
      }
      categoryList.value=result;
}

const historyList = ref([]); // 可根据实际需求填充数据

// 方法
const onClickLeft = () => {
  uni.showToast({
    title: '返回',
    icon: 'none'
  });
};

const latestInterviewInfo=ref([]);
const loadLatestInterviewInfo=async()=>{
    const result = await proxy.Request({
        url: proxy.Api.getLatestInterviewInfo,
        method: 'GET',
        showLoading: false
      });
      if(!result){
        return;
      }
      latestInterviewInfo.value=result;
      console.log(latestInterviewInfo.value)
}

const onCategoryClick = (item) => {
  // 跳转到面试问题页面
  uni.navigateTo({
    url: `/pages/question/InterviewQuestion?categoryName=${encodeURIComponent(item.categoryName)}&categoryId=${encodeURIComponent(item.categoryId)}`
  });
};

// 跳转到分类页面
const navigateToCategory = () => {
  uni.switchTab({
    url: '/pages/category/CategoryIndex'
  });
};

const checkLogin=()=>{
    if (!uni.getStorageSync('token')) {
      // 清空页面栈，无法返回
      uni.reLaunch({
        url: '/pages/Login'
      });
      proxy.Message.warning("未登录，请先登陆");
      return false;
    }else{
        return true;
    }
}

// 处理标签点击
const handleTagClick = (item) => {
  if (item.interviewId) {
    uni.navigateTo({
      url: `/pages/report/InterviewReport?interviewId=${item.interviewId}`
    });
  }
};

// 生成标签样式类
const getTagClass = (index) => {
  const colors = ['tag-primary', 'tag-success', 'tag-warning', 'tag-error', 'tag-default'];
  return colors[index % colors.length];
};

onShow(()=>{
 if(!checkLogin()) return;
  loadLatestInterviewInfo();
  loadHotCategory();
})

</script>

<style scoped>
/* 页面整体样式 */
.home-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 6px;
}

/* 头部提示区域 */
.header-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 20px;
  margin: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  background: linear-gradient(to bottom,#c7e2f5, #eaf6ff);
}
.prompt-text {
  font-size: 16px;
  margin-bottom: 25px;
  color: #666;
  display: block;
}
.view-all-btn {
  border-radius: 20px;
  font-size: 15px;
  background-color: #1976d2;
  color: #fff;
  width: 60%;
  margin: 0 auto;
}

/* 板块标题通用样式 */
.section-title {
  font-size: 22px;
  font-weight: bold;
  margin: 16px 0 8px 16px;
  display: block;
  margin-bottom: 15px;
}

/* 热门分类区域 */
.category-section {
  margin-bottom: 20px;
}
.category-list {
  margin: 0 10px;

}
.category-item {
  padding: 13px;
  border-radius: 8px;
  margin-bottom: 13px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 90%;
}
.category-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  margin-right: 10px;
}
.category-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.category-title {
  font-size: 15px;
  margin-bottom: 5px;
}
.category-questions {
  font-size: 12px;
  color: #999;
}

/* 最近面试区域 */
.history-section {
  margin-bottom: 60px; /* 给底部TabBar留出空间 */
}
.history-empty {
  text-align: center;
  padding: 20px;
  color: #999;
}
.history-tags {
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.history-tag {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  background-color: #f0f0f0;
  color: #333;
}
.tag-primary {
  background-color: #1976d2;
  color: #fff;
}

.tag-success {
  background-color: #4caf50;
  color: #fff;
}
.tag-warning {
  background-color: #ff9800;
  color: #fff;
}

.tag-error {
  background-color: #f44336;
  color: #fff;
}

.tag-default {
  background-color: #f5f5f5;
  color: #333;
}

.history-empty {
  text-align: center;
  padding: 20px;
  color: #999;
  background: #fff;
  border-radius: 8px;
  margin: 0 16px;
}

/* 底部 TabBar 样式 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #f5f5f5;
  display: flex;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.tabbar-item.active {
  color: #1976d2;
}
</style>